<div data-dojo-type="${baseClass}" style="width: 100%; height: 100%; padding: 0;">

    <div data-dojo-attach-point="treeLayoutContainer" 
        data-dojo-type="dijit/layout/BorderContainer"
        style="width: 100%; height: 100%; padding: 0;">

        <div data-dojo-type="dijit/Toolbar"
            data-dojo-props="region: 'top'"
            style="border-top: none; border-right: none; border-left: none;">

            <div data-dojo-type="dijit/form/Button"
                data-dojo-attach-point="btnAddLayer"
                data-dojo-props="iconClass: 'dijitIconNewTask'">
                {{gettext 'Add layer'}}

                <div data-dojo-type="ngw-resource/ResourcePicker"
                    data-dojo-attach-point="layerPicker"
                    data-dojo-props="interface: 'IRenderableStyle'">
                </div>

            </div>

            <div data-dojo-type="dijit/form/Button"
                data-dojo-attach-point="btnAddGroup"
                data-dojo-props="iconClass: 'dijitFolderClosed'">
                {{gettext 'Add group'}}
            </div>
            
            <div data-dojo-type="dijit/form/Button"
                data-dojo-attach-point="btnDeleteItem"
                data-dojo-props="iconClass: 'dijitEditorIcon dijitEditorIconDelete'"
                disabled="disabled">
                {{gettext 'Remove'}}
            </div>

            <div data-dojo-type="dijit/form/Button"
                data-dojo-attach-point="btnLayerOrder"
                data-dojo-props="iconClass: 'dijitEditorIcon dijitEditorIconSelectAll'"
                style="float:right"
                class="dijitButton--signal">
                {{gettext 'Layer order'}}
            </div>

        </div>

        <div data-dojo-attach-point="containerTree"
                data-dojo-type="dijit/layout/ContentPane"
                data-dojo-props="region: 'center'"
                style="padding: 0; margin-left: 5px; margin-bottom: 5px;">
        </div>

        <div data-dojo-attach-point="itemPane"
            data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region: 'right', splitter: true"
            style="width: 70%; margin-right: 5px; margin-bottom: 5px;">
            
            <div data-dojo-attach-point="widgetProperties"
                data-dojo-type="dijit/layout/StackContainer"
                data-dojo-props="doLayout: false"
                style="width: 100%;">

                <div data-dojo-type="dijit/layout/ContentPane"></div>

                <div data-dojo-attach-point="paneLayer"
                    data-dojo-type="dijit/layout/ContentPane"
                    style="padding: 0;">

                    <div data-dojo-type="dojox/layout/TableContainer"
                        data-dojo-props="labelWidth: 150">

                        <div data-dojo-attach-point="widgetItemDisplayNameLayer"
                            data-dojo-type="ngw-pyramid/form/DisplayNameTextBox"
                            title="{{gettext 'Display name'}}" style="width: 100%"></div>

                        <div data-dojo-attach-point="wdgtItemLayerEnabled" 
                            data-dojo-type="dijit/form/CheckBox"
                            title="{{gettext 'Enabled'}}">
                        </div>

                        <div data-dojo-attach-point="wLayerTransparency"
                            data-dojo-type="dijit/form/NumberTextBox"
                            data-dojo-props="constraints: {min: 0, max: 100}"
                            style="width: 100%"
                            title="{{gettext 'Transparency'}}">
                        </div>

                        <div data-dojo-attach-point="wLayerMinScale" 
                            data-dojo-type="ngw-pyramid/form/ScaleTextBox"
                            title="{{gettext 'Min scale'}}">
                        </div>

                        <div data-dojo-attach-point="wLayerMaxScale"
                            data-dojo-type="ngw-pyramid/form/ScaleTextBox"
                            title="{{gettext 'Max scale'}}">
                        </div>

                        <div data-dojo-attach-point="wLayerAdapter"
                            data-dojo-type="dijit/form/Select"
                            style="width: 100%;"
                            title="{{gettext 'Adapter'}}">
                        </div>

                        <div data-dojo-attach-point="wLayerStyle"
                            data-dojo-type="dijit/form/ValidationTextBox"
                            data-dojo-props="disabled: true"
                            style="width: 100%"
                            title="{{gettext 'Style resource'}}">
                        </div>

                    </div>

                </div>

                <div data-dojo-attach-point="paneGroup"
                    data-dojo-type="dijit/layout/ContentPane"
                    style="padding: 0">

                    <div data-dojo-type="dojox/layout/TableContainer"
                        data-dojo-props="labelWidth: 150">

                        <div data-dojo-attach-point="widgetItemDisplayNameGroup"
                            data-dojo-type="ngw-pyramid/form/DisplayNameTextBox"
                            title="{{gettext 'Display name'}}" style="width: 100%"></div>

                        <div data-dojo-attach-point="widgetItemGroupExpanded"
                            data-dojo-type="dijit/form/CheckBox"
                            title="{{gettext 'Expanded'}}"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>
